import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { Button, Typography } from "antd";

import styles from "./Home.module.scss";
import { LOGIN_PATHNAME } from "../router";
import { useRequest, useTitle } from "ahooks";
import { getUsageStatService } from "../services/question";

const { Title, Paragraph } = Typography;

const Home: React.FC = () => {
  useTitle("新问卷");
  const nav = useNavigate();
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const [data, setData] = useState<any>({
    questionCount: 0,
    questionPublishedCount: 0,
    answerCount: 0,
  });
  const { run } = useRequest(async () => await getUsageStatService(), {
    manual: true,
    onSuccess(res) {
      setData(res);
    },
  });

  useEffect(() => {
    run();
  }, []);

  function clickHandler() {
    nav(LOGIN_PATHNAME);
  }

  return (
    <div className={styles.container}>
      <div className={styles.info}>
        <Title>问卷调查 | 在线投票</Title>
        <Paragraph>
          已累计创建问卷{data.questionCount}份，发布问卷
          {data.questionPublishedCount}
          份，收到答卷{data.answerCount}份
        </Paragraph>
        <div>
          <Button type="primary" onClick={clickHandler}>
            开始使用
          </Button>
        </div>
      </div>
    </div>
  );
};
export default Home;
